table.q-table
  border-spacing 0
  empty-cells show

  thead
    text-align left
    vertical-align bottom
    font-weight 700

  th, td
    &:first-child
      border-left-width 0

    margin 0
    padding .5rem .7rem

  &.compact
    th, td
      padding .1rem .3rem
  &.loose
    th, td
      padding 1rem

  &.bordered, &.cell-separator:not(.responsive):not(.flipped)
    border $table-border

  &:not(.responsive):not(.flipped)
    &.horizontal-separator, &.cell-separator
      th, td
        border-bottom $table-border

    &.vertical-separator, &.cell-separator
      th, td
        border-left $table-border
        &:last-child
          border-right $table-border

  &.striped-odd, &.striped
    tbody tr:nth-child(odd)
      background $table-stripe-color
  &.striped-even
    tbody tr:nth-child(even)
      background $table-stripe-color

  &.flipped
    display flex
    overflow hidden
    background none

    thead
      display flex
      flex-shrink 0
      min-width min-content

    tbody
      display flex
      position relative
      overflow-x auto
      overflow-y hidden

    tr
      display flex
      flex-direction column
      min-width min-content
      flex-shrink 0

    td, th
      display block

    td
      background-image none !important
      border-left 0

    th:not(:last-child),
    td:not(:last-child)
      border-bottom 0

    &.horizontal-separator, &.cell-separator
      tr
        border-left $table-border
        border-right $table-border

    &.vertical-separator, &.cell-separator
      th, td
        border-top $table-border
        &:last-child
          border-bottom $table-border

  @media (max-width $breakpoint-sm-max)
    &.responsive:not(.flipped)
      thead
        display none
      tr, td
        display block
      tr
        position relative
      td:before
        content attr(data-th)
        display block
        text-align left
        font-weight bold

      &.horizontal-separator
        tr:not(:last-child)
          border-bottom $table-border

      &.cell-separator
        tr
          border $table-border

      &.vertical-separator, &.cell-separator
        th, td
          border-left $table-border
          border-right $table-border

body.desktop table.q-table.highlight tbody tr
  transition all .28s ease-in
  &:hover
    background $table-highlight-color
